<template>
  <view
    class="navigation_bar"
    :style="'height:' + (system.statusBarHeight + 44) + 'px'"
  >
    <view class="bar_container">
      <view :style="'height:' + system.statusBarHeight + 'px'"></view>
      <view class="navigation_container safe-left safe-right">
        <view class="navigation_content">
          <view class="navigation_content_view flex flex-middle flex-between">
            <view class="flex flex-middle" @click="backClick">
              <u-icon size="16" color="#fff" name="arrow-left" />
              <text>我的会员</text>
            </view>

            <view class="slot_view safe-padding-right">
              <slot name="right"></slot>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["system"]),
  },
  methods: {
    backClick() {
      this.$navigateBack();
    },
  },
};
</script>
  
<style scoped lang="scss">
.navigation_bar {
  .bar_container {
    position: fixed;
    z-index: 10086;
    top: 0;
    left: 0;
    width: 100vw;
    background: #000;
    overflow: hidden;
  }

  .navigation_container {
    border-bottom: 1px solid rgba(#000, 0.1);
    position: relative;

    .navigation_content {
      padding: 0 12px;

      .navigation_content_view {
        height: 44px;

        text {
          font-size: 16px;
          color: #fff;
          margin-left: 6px;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
  